<template>
  <div class="gl_mb_20">
    <el-row class="gl_py_5" type="flex" justify="space-between">
      <el-col :span="24">
        <span class="charge_item_title gl_mr_20">{{ data.Name }}</span>
        <span class="charge_item_amount">{{ data.Name }} {{ data.Amount && data.Amount / 100 }} 元</span>
      </el-col>
    </el-row>
    <el-table class="table" :data="data.Items" size="mini">
      <el-table-column type="index" label="序号" :width="50" align="center" />
      <el-table-column prop="Name" label="姓名" :width="120" align="center" />
      <el-table-column prop="Gender" label="性别" :width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.Gender }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="IdCardNumber" label="证件号码" :width="150" align="center" />
      <el-table-column prop="Organization" label="参赛机构" :width="150" />
      <template>
        <el-table-column v-if="gameInfo.competition.parentId && gameInfo.competition.isFinal" label="赛区" :min-width="100">
          <template slot-scope="{ row }">
            {{ row.SubCompetitionName }}
          </template>
        </el-table-column>
      </template>
      <el-table-column prop="IndividualEvents" label="个人项目" :min-width="200">
        <template slot-scope="{ row }">
          <p v-for="(individualEvent, inindex) in row.IndividualEvents" :key="inindex">
            <span>{{ individualEvent.EventLongName || '' }}</span>
            <span v-if="inindex !== row.IndividualEvents.length - 1">，</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="TeamEvents" label="团体项目" :min-width="150">
        <template slot-scope="{ row }">
          <p v-for="(teamEvent, tindex) in row.TeamEvents" :key="tindex">
            <span>{{ teamEvent.EventLongName || '' }}</span>
            <span v-if="tindex !== row.TeamEvents.length - 1">，</span>
          </p>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="sub_total gl_py_5" type="flex" justify="end">
      <el-col :span="6" align="right">
        <span>共报名人数为：{{ data.ItemsCount }} 人</span>
      </el-col>
      <el-col :span="6" align="right" class="gl_pr_20">
        <span>合计：<span>{{ data.CategoryAmount && data.CategoryAmount / 100 }}</span> 元</span>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    gameInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {};
  }
};
</script>
